<template>
<!--  <el-space direction="vertical">
    <el-card  class="box-card" style="width: 250px">
      <template #header>
        <div class="card-header">
          <span>MYSQL</span>
&lt;!&ndash;          <el-button class="button" type="text">monitor</el-button>&ndash;&gt;
        </div>
      </template>
   &lt;!&ndash;   <div v-for="o in 4" :key="o" class="text item">
        {{ 'List item ' + o }}
      </div>&ndash;&gt;
        <div class="text item">
          <el-button type="success">执行次数</el-button>
        </div>
    </el-card>
  </el-space>-->

  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1']">
    <!--default-openeds:展开坐标-->
      <el-sub-menu index="1">
        <template #title
        ><i class="el-icon-coin"></i>MySQL</template
        >
        <el-menu-item-group>
          <template #title>SQL语句</template>
          <el-menu-item index="1-1" @click="$router.push('/events/index')">执行情况</el-menu-item>
          <el-menu-item index="1-2" @click="$router.push('/events/digest')">执行次数</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Table表">
          <el-menu-item index="1-3" @click="$router.push('/events/fileSummary')">事件/物理IO</el-menu-item>
          <el-menu-item index="1-4" @click="$router.push('/events/tableIndexes')">索引/逻辑IO</el-menu-item>
        </el-menu-item-group>

        <el-sub-menu  index="1-5">
          <template #title>数据库连接</template>
          <el-menu-item index="1-5-1" @click="$router.push('/events/connections')">用户连接</el-menu-item>
          <el-menu-item index="1-5-2" @click="$router.push('/events/profile')">测试SQL语句</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!--拓展页面-->
      <!--      <el-sub-menu index="2">
        <template #title><i class="el-icon-menu"></i>Navigator Two</template>
        <el-menu-item-group>
          <template #title>Group 1</template>
          <el-menu-item index="2-1">Option 1</el-menu-item>
          <el-menu-item index="2-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="2-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="2-4">
          <template #title>Option 4</template>
          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title
        ><i class="el-icon-setting"></i>Navigator Three</template
        >
        <el-menu-item-group>
          <template #title>Group 1</template>
          <el-menu-item index="3-1">Option 1</el-menu-item>
          <el-menu-item index="3-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="3-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="3-4">
          <template #title>Option 4</template>
          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>-->
    </el-menu>
  </el-aside>

</template>

<script>
export default {
  name: "MainTabBar",
  setup(){


    return{

    }
  }
}
</script>

<style scoped>
.el-aside {
  color: var(--el-text-color-primary);
  width: 260px;
}
</style>